<template>
  <div ref="bar" class="chart"></div>
</template>
<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import * as eCharts from 'echarts';

const bar = ref(null);
const _option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  tooltip: {
    show: true
  },
  radar: {
    indicator: [],
    center: ['50%', '50%'],
    radius: '75%',
    axisName: {
      color: 'white'
    }
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [],
          name: ''
        }
      ],
      areaStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0, color: '#bdf3f7' // 0% 处的颜色
          }, {
            offset: 1, color: '#18a2bd' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    }
  ]
};

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  colorArray: {
    type: Array,
    default: () => [251, 203, 255]
  },
  serieName: {
    type: String,
    default: '车辆行为'
  }
});

watch(() => props.data, (v) => {
  if (chart) {
    const { serieName } = props;
    chart.setOption(getOption(v, serieName), true);
  }
});

let chart;
onMounted(() => {
  const barDom = bar.value;
  chart = eCharts.init(barDom);
  const { data, serieName } = props;
  if (data.length > 0) {
    chart.setOption(getOption(data, serieName));
  }
});

/** 获取 */
const getOption = (data, serieName) => {
  const opt = JSON.parse(JSON.stringify(_option));
  opt.radar.indicator = data.map(({ name }) => {
    return { name };
  });
  opt.series[0].data['0'].value = data.map(({ value }) => value);
  opt.series[0].name = serieName;
  return opt;
};
</script>
<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
